<template>
  <view class="addCard__form">
    <u-form :model="form" ref="addCard"	label-width="0">
      <u-form-item prop="realName">
        <text class="form__label">姓名</text>
        <u-input v-model="form.realName" />
      </u-form-item>
      <u-form-item prop="idCard">
        <text class="form__label">身份证号码</text>
        <u-input v-model="form.idCard" />
      </u-form-item>
      <u-form-item prop="bankNumber">
        <text class="form__label">银行卡号</text>
        <u-input v-model="form.bankNumber" />
      </u-form-item>
      <u-form-item prop="bankDeposit">
        <text class="form__label">开户行</text>
        <u-input v-model="form.bankDeposit"/>
      </u-form-item>
      <u-form-item prop="branchName">
        <text class="form__label">支行名称</text>
        <u-input v-model="form.branchName" />
      </u-form-item>
      <u-form-item prop="bankPhone">
        <text class="form__label">预留手机号</text>
        <u-input v-model="form.bankPhone" />
      </u-form-item>
    </u-form>
    <view class="submit__btn" @tap="$u.throttle(submit, 5000)">保存</view>
    <u-toast ref="uToast"/>

  </view>
</template>
<script>
import {addCard,realCheck} from "../../api/bankCard";

export default {
  data() {
    return {
      form:{
        realName:"",
        bankDeposit:"",
        branchName:"",
        bankNumber:"",
        bankPhone:"",
        idCard:"",
      },
      rules: {
        realName: [
          {
            required: true,
            message: '请输入真实姓名',
            trigger: ['change','blur'],
          }
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号码',
            trigger: ['change','blur'],
          }
        ],
        bankDeposit: [
          {
            required: true,
            message: '请输入开户行',
            trigger: ['change','blur'],
          }
        ],
        branchName: [
          {
            required: true,
            message: '请输入开户行支行名称',
            trigger: ['change','blur'],
          }
        ],
        bankNumber: [
          {
            required: true,
            message: '请输入银行卡号',
            trigger: ['change','blur'],
          }
        ],
        bankPhone: [
          {
            required: true,
            message: '请输入预留手机号码',
            trigger: ['change','blur'],
          }
        ],

      }
    }
  },
  methods:{
    submit() {
      let _this = this;
      this.$refs.addCard.validate(valid => {
        if (valid) {
          realCheck({
            bankNumber: this.form.bankNumber,
            idCard: this.form.idCard,
            realName: this.form.realName
          }).then(res =>{

            if (res.code == 200){
              addCard(this.form).then(res =>{
                _this.$refs.uToast.show({
                  title: '添加成功',
                  duration:1000,
                  type: 'success',
                  callback(){
                    uni.navigateBack({
                      delta: 1
                    });
                  }
                })
              })
            }else {
              this.$refs.uToast.show({
                title: result.message,
                duration:2000,
                type: 'error',
              })
            }
          }).catch(err =>{
            console.log(err);
          })

        } else {
          console.log('验证失败');
        }
      });
    }
  },
  onReady() {
    this.$refs.addCard.setRules(this.rules);
  }
}
</script>

<style lang="scss" scoped>
.addCard__form{
  width: 90%;
  margin: 0 auto;
  .form__label{
    color: #2E3C4D;
  }
}
.submit__btn{
  border-radius: 10rpx;
  margin-top: 40rpx;
}
</style>
